<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 20px;
      min-height: 80px;
    "
  >
    <el-steps
      :active="componentProps.active"
      :direction="componentProps.direction"
      :align-center="componentProps.alignCenter"
      :process-status="componentProps.processStatus"
      :finish-status="componentProps.finishStatus"
      :simple="componentProps.simple"
      :space="componentProps.space"
      style="width: 100%"
    >
      <el-step
        v-for="(step, index) in currentSteps"
        :key="index"
        :title="step.title"
        :description="step.description"
        :icon="step.icon"
        :status="step.status"
      />
    </el-steps>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElSteps, ElStep } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import { shouldUpdateChartData } from '@/utils/shallow-equal';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';

interface StepItem {
  title: string;
  description?: string;
  icon?: string;
  status?: 'wait' | 'process' | 'finish' | 'error' | 'success';
}

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'steps',
      transform: 'array',
      defaultValue: '[]',
      updateInterval: 0,
      updateMode: 'replace'
    })
  },
  active: {
    type: Number,
    default: 0
  },
  direction: {
    type: String as () => 'vertical' | 'horizontal',
    default: 'horizontal'
  },
  alignCenter: {
    type: Boolean,
    default: false
  },
  processStatus: {
    type: String as () => 'wait' | 'process' | 'finish' | 'error' | 'success',
    default: 'process'
  },
  finishStatus: {
    type: String as () => 'wait' | 'process' | 'finish' | 'error' | 'success',
    default: 'finish'
  },
  simple: {
    type: Boolean,
    default: false
  },
  space: {
    type: [Number, String],
    default: ''
  },
  steps: {
    type: Array as () => StepItem[],
    default: () => [
      {
        title: '步骤1',
        description: '这是步骤1的描述'
      },
      {
        title: '步骤2',
        description: '这是步骤2的描述'
      },
      {
        title: '步骤3',
        description: '这是步骤3的描述'
      }
    ]
  }
});

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  active: props.active,
  direction: props.direction,
  alignCenter: props.alignCenter,
  processStatus: props.processStatus,
  finishStatus: props.finishStatus,
  simple: props.simple,
  space: props.space,
  steps: props.steps
});

// 使用数据绑定
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';
const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 数据绑定处理已在composable中完成，这里只需要监听连接状态
// 性能优化：添加相等性检查和数组浅比较
watch(
  () => dataBinding.isConnected.value,
  (connected, oldConnected) => {
    if (connected === oldConnected) return;
    // 可以在这里处理连接状态变化的副作用
    if (!connected && props.dataBinding?.defaultValue) {
      try {
        const defaultSteps = JSON.parse(props.dataBinding.defaultValue);
        if (Array.isArray(defaultSteps)) {
          if (shouldUpdateChartData(defaultSteps, componentProps.value.steps)) {
            componentProps.value.steps = defaultSteps;
          }
        }
      } catch {
        if (shouldUpdateChartData([], componentProps.value.steps)) {
          componentProps.value.steps = [];
        }
      }
    }
  },
  { immediate: true }
);

// 监听props变化，同步到响应式属性对象
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.active,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      componentProps.value.active = newValue;
    }
  }
);
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.direction,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      componentProps.value.direction = newValue;
    }
  }
);
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.alignCenter,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      componentProps.value.alignCenter = newValue;
    }
  }
);
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.processStatus,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      componentProps.value.processStatus = newValue;
    }
  }
);
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.finishStatus,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      componentProps.value.finishStatus = newValue;
    }
  }
);
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.simple,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      componentProps.value.simple = newValue;
    }
  }
);
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.space,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      componentProps.value.space = newValue;
    }
  }
);
// 性能优化：使用浅比较检查数组数据变化
watch(
  () => props.steps,
  (newValue, oldValue) => {
    if (!shouldUseDataBinding && shouldUpdateChartData(newValue, oldValue)) {
      componentProps.value.steps = newValue;
    }
  },
  { deep: false }
);

// 使用计算属性来获取当前的步骤数据
const currentSteps = computed(() => {
  const steps = componentProps.value.steps;
  // 确保至少有一些默认步骤
  if (!steps || steps.length === 0) {
    return [
      {
        title: '步骤1',
        description: '这是步骤1的描述'
      },
      {
        title: '步骤2',
        description: '这是步骤2的描述'
      },
      {
        title: '步骤3',
        description: '这是步骤3的描述'
      }
    ];
  }
  return steps;
});
</script>
